
<template>
  <div style="display: flex" class="tempxyz menmuStyle">
    <CCard class="leftCard" style>
      <div class="manageBtn" style>
        底图分类
      </div>
      <div class="imageControl-treeDiv">
        <Menu  @on-select="onSelect"  style="width: 100%">
              <MenuItem v-for="item in leftTree" :name="item.id" :key="item.id">
                <Icon type="md-document" />
                  {{ item.mapName }}
              </MenuItem>
        </Menu>
      </div>
    </CCard>
     <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
          <span class="textTitle">列表</span>
        </div>
        <div class="header-right-wraper">
          <CButton color="info" @click="addMapUrl" class="system-btn-style">
            <CIcon name="cil-plus" />&nbsp;底图
          </CButton>
        </div>
      </CCardHeader>
      <CCardBody class="card-body">
        <div style="height: calc(100% - 46px)">
          <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios">
            <template v-slot:isPublish="item">
              <Button v-if="item.data.row.isPublish===1" type="primary" shape="circle"  size="small"><Icon type="md-checkmark" /></Button>
              <Button v-else type="warning" shape="circle"  size="small"><Icon type="md-close" /></Button>
            </template>
            <template v-slot:isDefault="item">
              <Button v-if="item.data.row.isDefault===1" type="primary" shape="circle"  size="small"><Icon type="md-checkmark" /></Button>
              <Button v-else type="warning" shape="circle"  size="small"><Icon type="md-close" /></Button>
            </template>
            <template v-slot:show_details="item">
              <CButton
                title="编辑"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="update(item.data.row)"
                >编辑</CButton
              >
              <CButton
                title="删除"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="delCancel(item.data.row)"
                >删除</CButton
              >
            </template>
          </TableList>
        </div>
      </CCardBody>
    </CCard>

    <!--新建修改任务-->
    <Modal
        v-model="newTask"
        draggable
        scrollable
        :title="courentRowData.id?'更新底图':'新建底图'"
        class="newTaskClass"
        :width="800">
      <Form ref="formValidate" :model="newTaskData" :rules="newTaskDataRule" :label-width="140">
        <FormItem label="名称：" prop="mapName"  class="nameClass">
          <Input v-model="newTaskData.mapName" placeholder="请输入底图名称" />
        </FormItem>
        <FormItem label="底图地址：" prop="mapUrl">
          <!--<Input search enter-button placeholder="Enter something..." />-->
          <Input v-model="newTaskData.mapUrl" placeholder="请输入底图地址"    />
        </FormItem>
        <FormItem label="是否默认：" prop="isDefault">
          <RadioGroup v-model="newTaskData.isDefault">
            <Radio :label=0>普通</Radio>
            <Radio :label=1>默认</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="是否发布：" prop="isDefault">
          <RadioGroup v-model="newTaskData.isPublish">
            <Radio :label=0>否</Radio>
            <Radio :label=1>是</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <template #footer class="footerBtns">
        <CButton @click="newTaskCancel" color="info" class="cancel-btn">取消</CButton>
        <CButton @click="newTaskConfim" color="info" class="system-btn-style">确定</CButton>
      </template>
    </Modal>
    <!--删除任务-->
    <Modal
        v-model="delShow"
        draggable
        scrollable
        title="删除任务"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除任务</span>
      </p>
      <div class="delKuangBody">
        <p>您正在删除该任务信息</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delShow=false" color="info" class="cancel-btn">取消</CButton>
        <CButton @click="delOk" color="info" class="system-btn-style">确定</CButton>
      </template>
    </Modal>
  </div>
</template>

<script>
import TableList from "@/template/table/TableList";
export default {
  name: "baseMapManage",
  components: { TableList },
  data() {
    return {
 /******left部分*********/
      leftTree: [],
/******right部分*******/
      newTaskData: {     // 新建任务表单项
        mapName: "",
        mapUrl: "",
        isDefault: 0,
        isPublish: 0,
      },
      newTaskDataRule: {
        mapName: [
          {required: true, message: '请输入底图名称', trigger: 'blur'}
        ],
        mapUrl: [
          {required: true, message: '请输入底图地址', trigger: 'blur'}
        ],
      }, // 新建任务校验
      newTask: false, // 添加任务
      courentRowData: {},
      delShow: false,
      pId: 1,
      getColumns: [
        {
          title: "名称",
          key: "mapName",
          className: "centerText",
          width: "140",
        },
        {
          title: "服务地址",
          key: "mapUrl",
          className: "centerText",
        },
        {
          title: "创建人",
          key: "userName",
          className: "centerText",
          width: "80",
        },
        {
          title: "创建时间",
          key: "createTime",
          className: "centerText",
          width: "170",
        },
        {
          title: "更新时间",
          key: "updateTime",
          className: "centerText",
          width: "170",
        },
        {
          title: "是否公开",
          key: "isPublish",
          slot: "isPublish",
          className: "centerText",
          width: "80",
        },
        {
          title: "是否默认",
          key: "isDefault",
          slot: "isDefault",
          className: "centerText",
          width: "80",
        },
        {
          key: "show_details",
          slot: "show_details",
          title: "操作",
          className: "centerText",
          width: 140,
        },
      ],
      getAxios: {
        url: this.$api.manageApi.getBaseMapByPId, //请求路径
        method: "get", //请求方式
        dataList: { pId: 1 }, //请求参数
      },
    };
  },
  mounted() {
    this.getImageControlTree();
  },
  methods: {

    onSelect(data) {
      let that = this;
      that.pId = data;
      that.$refs.table.getRefreshTable({
        pId: data,
      })
    },
    addMapUrl() {
      this.newTask = true;
      this.newTaskData =  {  // 新建任务表单项
        mapName: "",
        mapUrl: "",
        isDefault: 0
      }
    },
    newTaskCancel() {
      this.newTask = false;
      this.$refs.formValidate.resetFields();
      this.newTaskData =  {  // 新建任务表单项
        mapName: "",
        mapUrl: "",
        isDefault: 0
      }
    },
    newTaskConfim() {
      let that = this;
      that.$refs.formValidate.validate((valid) => {
        if (valid) {
          that.newTaskData= Object.assign({parentId:  that.pId, userName: this.$store.state.user.userName},this.newTaskData)
          let url = that.courentRowData.id? that.$api.sampleManage.updateClassifyBaseMapById + that.courentRowData.id : that.$api.sampleManage.addClassifyBaseMap;
          that.http.post(url, that.newTaskData)
              .then((res) => {
                if (res.status === 200) {
                  that.newTask=false
                  that.$refs.formValidate.resetFields();
                  that.$refs.table.getRefreshTable({
                    pId: that.pId,
                  })
                  that.$Message.success('保存成功!');
                } else {
                  that.$Message.error('保存失败！');
                }
              }).catch(()=>{
            that.$Message.error('保存失败，请联系管理员！');
          })
        } else {
          that.$Message.error('请完整填写表单！');
        }
      })
    },
    update(data) {
      this.newTask = true;
      this.courentRowData = JSON.parse(JSON.stringify(data));
      this.newTaskData = JSON.parse(JSON.stringify(data));
    },
    //任务 删除
    delCancel(data) {
      this.delShow = true;
      this.courentRowData = data;
    },
    delOk(){
      let that = this;
      this.http.get(this.$api.sampleManage.deleteByIdMap+this.courentRowData.id)
          .then((item)=>{
            if (item.data.code===200) {
              that.delShow = false;
              that.$Message.success('删除成功!');
              that.$refs.table.getRefreshTable({
                pId: that.pId,
              })
            } else {
              that.$Message.error('删除失败！');
            }
          }).catch(()=>{
        that.$Message.error('删除失败，请联系管理员！');
      })
    },
    getImageControlTree() {
      let self = this;
      let path = this.$api.manageApi.getClassifyRoot;
      this.http.get(path).then((res) => {
        if (res.data.success) {
          self.leftTree = res.data.data;
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
  },
};
</script>
<style scoped>
.selectProLine-col {
  border-right: 1px solid #d8dbe0;
}
.col-md-2 {
  padding-right: 10px;
  padding-left: 20px;
}
.col-md-10 {
  padding-right: 20px;
  padding-left: 0px;
}
.manageBtn {
  border-bottom: 1px solid #d8d8d8;
  margin-top: 15px;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-evenly;
}
::-webkit-scrollbar-thumb {
  background-color: #7eb8ee;
}
.dic_tree {
  max-width: 230px;
  overflow-y: auto;
  height: 100%;
}

/* 分页 */
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: black;
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}
.productionLine-treeDiv-left {
  max-height: 500px;
  overflow-x: auto;
  overflow-y: auto;
  margin-bottom: -16px;
  margin-right: -16px;
}

.productionLine-treeDiv-right {
  max-height: 500px;
  overflow-x: auto;
  overflow-y: auto;
  margin-bottom: -16px;
  margin-right: -18px;
}

.userTitle {
  margin-bottom: 0 !important;
  margin-top: 5px;
}

.imageControlManage {
  height: 100%;
  overflow-y: auto;
}

.menmuStyle {
  height: 100%;
}
.imageControl-treeDiv {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}

.ztree {
  margin: 0;
  padding: 0;
}
.rightCard {
  width: 80%;
  margin-left: 10px;
  flex: 1;
}

.leftCard {
  width: 18%;
}
/deep/.card {
  margin-bottom: 0;
}

/deep/.ivu-table td.centerText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}
.onButton:hover {
  color: white;
}
/deep/ footer.page-link:hover {
  background-color: #ffffff;
}
</style>

<!--
<template>
  <div style="display: flex" class="tempxyz menmuStyle">
    <CCard class="leftCard" style>
      <div class="manageBtn" style>
&lt;!&ndash;        <CButton
          title="添加节点"
          variant="outline"
          class="headTextBtnStyle system-btn-style"
          @click="addTreeNode"
        >
          添加节点
        </CButton>

        <CButton
          title="编辑部门节点"
          variant="outline"
          class="headTextBtnStyle system-btn-style"
          @click="updateTreeNode"
          data-permission="Btn_Dept_UpR"
        >
          编辑节点
        </CButton>

        <CButton
          title="删除节点"
          variant="outline"
          class="headTextBtnStyle system-btn-style"
          @click="delTreeNode"
        >
          删除节点
        </CButton>&ndash;&gt;
        底图分类
      </div>
      <div class="imageControl-treeDiv">
        <ul id="imageControlTree" class="ztree customStyleZtree"></ul>
      </div>
    </CCard>

    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
          <span class="textTitle">{{ name }}列表</span>
        </div>
        <div class="header-right-wraper">
          <CButton color="info" @click="addCatalog" class="system-btn-style">
            <CIcon name="cil-plus" />&nbsp;底图
          </CButton>
        </div>
      </CCardHeader>
      <CCardBody class="card-body">
        <div style="height: calc(100% - 46px)">
          <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios">
            <template v-slot:show_details="item">
              &lt;!&ndash; <CButton
                title="查看"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="look(item.data.row)"
                >查看</CButton
              > &ndash;&gt;
              <CButton
                title="编辑"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="update(item.data.row)"
                >编辑</CButton
              >
              <CButton
                title="删除"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="del(item.data.row.id)"
                >删除</CButton
              >
            </template>
          </TableList>
        </div>
      </CCardBody>
    </CCard>
    <Modal
      v-model="addNodeShow"
      draggable
      scrollable
      title="新建节点"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">新建节点</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="节点名称"
              placeholder="请输入节点名称"
              horizontal
              v-model="addData.mapName"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addNodeCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addOk('node')" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    &lt;!&ndash;更新部门&ndash;&gt;
    <Modal
      v-model="updateNodeShow"
      title="更新节点"
      draggable
      scrollable
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">更新节点</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="节点名称"
              placeholder="请输入节点名称"
              horizontal
              v-model="updateTreeNodeData.mapName"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="updateNodeCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateNodeOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="delNodeShow"
      draggable
      scrollable
      title="删除节点"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除节点</span>
      </p>
      <div class="delKuangBody">
        <p>删除节点时与节点相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delNodeCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk('node')" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="delShow"
      draggable
      scrollable
      title="删除底图影像"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除底图影像</span>
      </p>
      <div class="delKuangBody">
        <p>删除底图影像时与底图影像相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="addShow"
      draggable
      scrollable
      title="新建底图影像"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">新建底图影像</p>
      <Form
        ref="formCustom"
        :model="addData"
        :rules="ruleCustom"
        :label-width="120"
      >
        <FormItem label="底图影像名称:" prop="mapName">
          <Input type="text" v-model="addData.mapName"></Input>
        </FormItem>
        <FormItem label="底图影像地址:" prop="mapUrl">
          <Input type="text" v-model="addData.mapUrl"></Input>
        </FormItem>
        <FormItem label="是否公开:" prop="isPublic">
          <Switch v-model="addData.isPublic" @on-change="change" />
        </FormItem>
      </Form>

      <template #footer class="footerBtns">
        <CButton @click="addCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addService()" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="updateShow"
      draggable
      scrollable
      title="更新底图影像"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">更新底图影像</p>
      <Form
        ref="formCustom"
        :model="upData"
        :rules="ruleCustom"
        :label-width="120"
      >
        <FormItem label="底图影像名称:" prop="mapName">
          <Input type="text" v-model="upData.mapName"></Input>
        </FormItem>
        <FormItem label="底图影像地址:" prop="mapUrl">
          <Input type="text" v-model="upData.mapUrl"></Input>
        </FormItem>
        <FormItem label="是否公开:" prop="isPublic">
          <Switch v-model="test" @on-change="change" />
        </FormItem>
      </Form>

      <template #footer class="footerBtns">
        <CButton @click="updateCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="getShow"
      draggable
      scrollable
      title="查看底图影像"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">查看底图影像</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="底图影像名称"
              placeholder="请输入底图影像名称"
              horizontal
              v-model="getData.name"
              readonly
            />
            <CInput
              label="底图影像编码"
              placeholder="请输入底图影像编码"
              horizontal
              v-model="getData.code"
              readonly
            />
            <CInput
              label="底图影像路径"
              placeholder="请输入底图影像路径"
              horizontal
              v-model="getData.path"
              readonly
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="getShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="getShow = false" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
  </div>
</template>

<script>
const fields = [
  {
    label: "序号",
    key: "number",
    _style: "width:80px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "名称",
    key: "name",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "编码",
    key: "code",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "路径",
    key: "path",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    key: "show_details",
    label: "操作",
    _style: "width:240px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
];
import TableList from "@/template/table/TableList";
export default {
  name: "baseMapManage",
  components: { TableList },
  data() {
    return {
      test:true,
      //修改节点名称
      updateNodeShow: false,
      updateTreeNodeData: {
        mapName: "",
      },

      modalStyle: { top: "340px" },
      selectactionId: 0,
      addNodeShow: false,
      delNodeShow: false,
      delShow: false,
      updateShow: false,
      addShow: false,
      getShow: false,
      loading: true,
      data: [],
      fields,
      clickId: -1,
      selectId: -1,
      currentPage: 1,
      pages: 0,
      total: 0,
      allNum: 0,

      pageSize: 15,
      imageControlTreeData: [],
      currentNodeId: 0,
      name: "",
      getData: "",
      addData: {
        mapName: "",
        mapUrl: "",
        pId: "",
        isPublic: false,
      },

      upData: {
        mapName: "",
        mapUrl: "",
        pId: "",
        isPublic: false,
      },

      ruleCustom: {
        mapName: [
          { required: true, message: "请输入底图服务名称", trigger: "blur" },
        ],
        mapUrl: [
          {
            require: true,
            message: "请输入底图服务地址",
            trigger: "blur",
          },
        ],
      },

      getColumns: [
        {
          title: "名称",
          key: "mapName",
          className: "centerText",
          width: "140",
        },
        {
          title: "服务地址",
          key: "mapUrl",
          className: "centerText",
        },
        {
          title: "创建人",
          key: "userName",
          className: "centerText",
          width: "100",
        },
        {
          title: "创建时间",
          key: "createTime",
          className: "centerText",
          width: "170",
        },
        {
          title: "更新时间",
          key: "updateTime",
          className: "centerText",
          width: "170",
        },
        {
          title: "是否公开",
          key: "userName",
          className: "centerText",
          width: "80",
        },

        {
          key: "show_details",
          slot: "show_details",
          title: "操作",
          className: "centerText",
          width: 140,
        },
      ],
      getAxios: {
        url: this.$api.manageApi.getBaseMapByPId, //请求路径
        method: "get", //请求方式
        dataList: { id: 1 }, //请求参数
      },
    };
  },
  mounted() {
    this.getImageControlTree();
  },
  methods: {
    change() {},

    //编辑节点
    updateTreeNode() {
      let treeObj = $.fn.zTree.getZTreeObj("imageControlTree");
      this.updateTreeNodeData.name = treeObj.getSelectedNodes()[0].mapName;
      this.updateNodeShow = true;
    },
    //取消
    updateNodeCancel() {
      this.updateNodeShow = false;
    },
    // 確定
    updateNodeOk() {
      let self = this;
      let treeObj = $.fn.zTree.getZTreeObj("imageControlTree");
      let path =
        this.$api.manageApi.updateClassifyBaseMapById +
        treeObj.getSelectedNodes()[0].id;
      let param = {
        id: treeObj.getSelectedNodes()[0].id,
        pId: treeObj.getSelectedNodes()[0].pId,
        mapUrl: treeObj.getSelectedNodes()[0].mapUrl,
        mapName: this.updateTreeNodeData.mapName,
      };
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          self.getImageControlTree();
          this.$Message.success("修改成功");
        } else {
          this.$Message.error("修改失败");
        }
        this.updateNodeShow = false;
      });
      this.updateTreeNodeData = {
        mapName: "",
      };
    },

    /**
     * 获取每页对应的value值，并转为数值型
     */
    getVendorId(event) {
      let tempdata = event.target.value;
      this.pageSize = parseInt(tempdata);
    },
    /**
     * 点击查看按钮，显示弹窗，获取id和val值
     */
    look(val) {
      this.getShow = true;
      this.getData = val;
    },
    /**
     * 点击编辑按钮，显示弹窗，获取id和val值
     */
    update(val) {
      this.updateShow = true;
      this.clickId = val.id;
      this.upData = JSON.parse(JSON.stringify(val)); //deep copy
    },
    /**
     * 点击删除按钮，显示弹窗，获取id值
     */
    del(id) {
      this.delShow = true;
      this.clickId = id;
    },
    /**
     * 点击删除树节点按钮，显示弹窗，获取此id值
     */
    delTreeNode() {
      this.delNodeShow = true;
      let treeObj = $.fn.zTree.getZTreeObj("imageControlTree");

      this.clickId = treeObj.getSelectedNodes()[0].id;
    },
    /**
     * 点击增加任务类型按钮，显示弹窗
     */
    addCatalog() {
      this.addShow = true;
    },
    delOk(type) {
      let self = this;
      if (type === "node") {
        this.delNodeShow = false;
      } else {
        this.delShow = false;
      }
      if (!self.clickId) {
        this.$Message.warning("请先选择要删除的数据");
        return;
      }
      if (self.clickId == "0") {
        this.$Message.warning("不能删除根节点");
        return;
      }

      let path = this.$api.manageApi.deleteById + self.clickId;

      this.http.delete(path).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          if (type === "node") {
            self.getImageControlTree();
          }
          self.getImageControlByPId(self.selectId);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    delCancel() {
      this.delShow = false;
    },

    delNodeCancel() {
      this.delNodeShow = false;
    },

    addTreeNode() {
      this.addNodeShow = true;
    },

    addOk(type) {
      let self = this;
      let path = this.$api.manageApi.addClassifyBaseMap;

      if (self.addData.path == "") {
        self.addData.path = "null";
      }

      if (self.selectId == -1 || type === "node") {
        self.addData.pId = 0;
      } else {
        self.addData.pId = self.selectId;
      }
      let param = self.addData;
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getImageControlByPId(self.currentNodeId);

          if (type === "node") {
            self.getImageControlTree();
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });

      if (type === "node") {
        this.addNodeShow = false;
      } else {
        this.addShow = false;
      }
      self.addData = {
        mapName: "",
        mapUrl: "",
        pId: "",
        isPublic: false,
      };
    },
    addCancel() {
      this.addShow = false;
    },

    addNodeOk() {
      this.addNodeShow = false;
    },
    addNodeCancel() {
      this.addNodeShow = false;
    },

    updateOk(type) {
      let self = this;
      let path = this.$api.manageApi.updateClassifyBaseMapById + self.clickId;
      let param = self.upData;
      param.userName = "";
      this.http.post(path, param).then((res) => {
        this.updateShow = false;
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getImageControlByPId(self.currentNodeId);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    updateCancel() {
      this.updateShow = false;
    },
    // getOk() {
    //   this.getShow = false;
    // },
    // getCancel() {
    //   this.getShow = false;
    // },
    getImageControlTree() {
      let self = this;
      self.imageControlTreeData = [];
      let path = this.$api.manageApi.getClassifyRoot;
      this.http.get(path).then((res) => {
        self.loading = false;
        if (res.data.success) {
          self.imageControlTreeData = res.data.data;

          if (self.imageControlTreeData.length > 0) {
            self.name = self.imageControlTreeData[0].mapName;
            self.getImageControlByPId(self.imageControlTreeData[0].id);
          }

          let setting = {
            data: {
              simpleData: {
                enable: true,
              },
              key: {
                name: "mapName",
                title: "mapName",
              },
            },
            view: {
              showLine: false,
              showIcon: false,
              selectedMulti: false, //不可以多选
            },
            callback: {
              onClick: this.zTreeOnClick,
            },
          };

          $.fn.zTree.init(
            $("#imageControlTree"),
            setting,
            self.imageControlTreeData
          );
          let treeObj = $.fn.zTree.getZTreeObj("imageControlTree");
          var nodes = treeObj.getNodes();
          if (nodes.length > 0) {
            treeObj.selectNode(nodes[0]);
            self.selectId = nodes[0].id;
            self.currentNodeId = nodes[0].id;
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    zTreeOnClick(event, treeId, treeNode) {
      let self = this;
      if (self.selectId == treeNode.id) {
        let treeObj = $.fn.zTree.getZTreeObj("imageControlTree");
        let nodes = treeObj.getSelectedNodes();
        if (nodes.length > 0) {
          treeObj.cancelSelectedNode(nodes[0]);
          self.getImageControlByPId(0);
          // self.selectId = -1;
        }
      } else {
        self.selectId = treeNode.id;
        self.currentNodeId = treeNode.id;
        self.name = treeNode.name;

        this.getImageControlByPId(self.currentNodeId);
      }
    },
    /**
     * 分页功能实现
     */
    getImageControlByPId(parentId) {

      let self = this;
      self.selectactionId = parentId;
      self.data = [];
      let path = self.$api.manageApi.getBaseMapByPId;
      let param = {
        pId: parentId,
        pageSize: this.pageSize,
        pageNum: self.currentPage,
      };
      let getAxiosData = {
        method: "get",
        url: path,
      };

      self.$refs.table.getRefreshTable(param, getAxiosData);

      /*  self.http.post(path, params).then((res) => {
          if (res.data.success === true) {
            self.allNum = res.data.data.total;
            self.total = Math.ceil(res.data.data.total / self.pageSize);
            self.items = res.data.data.list;
            for (let i = 0; i < self.items.length; i++) {
              self.items[i].number =
                (self.currentPage - 1) * this.pageSize + i + 1;
            }
          } else {
            self.$Message.error(res.data.message);
          }
        });*/
    },
  },
  watch: {
    data(newVal, oldVal) {
      this.$nextTick(function () {
        this.GlobalPermissionRender.render();
      });
    },
    pageSize(newVal, oldVal) {
      this.pageSize = newVal;
      this.getImageControlByPId(this.selectactionId);
    },
    currentPage(newVal, oldVal) {
      this.currentPage = newVal;
      this.getImageControlByPId(this.selectactionId);
    },
  },
};
</script>
<style scoped>
.selectProLine-col {
  border-right: 1px solid #d8dbe0;
}
.col-md-2 {
  padding-right: 10px;
  padding-left: 20px;
}
.col-md-10 {
  padding-right: 20px;
  padding-left: 0px;
}
.manageBtn {
  border-bottom: 1px solid #d8d8d8;
  margin-top: 15px;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-evenly;
}
::-webkit-scrollbar-thumb {
  background-color: #7eb8ee;
}
.dic_tree {
  max-width: 230px;
  overflow-y: auto;
  height: 100%;
}

/* 分页 */
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: black;
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}
.productionLine-treeDiv-left {
  max-height: 500px;
  overflow-x: auto;
  overflow-y: auto;
  margin-bottom: -16px;
  margin-right: -16px;
}

.productionLine-treeDiv-right {
  max-height: 500px;
  overflow-x: auto;
  overflow-y: auto;
  margin-bottom: -16px;
  margin-right: -18px;
}

.userTitle {
  margin-bottom: 0 !important;
  margin-top: 5px;
}

.imageControlManage {
  height: 100%;
  overflow-y: auto;
}

.menmuStyle {
  height: 100%;
}
.imageControl-treeDiv {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}

.ztree {
  margin: 0;
  padding: 0;
}
.rightCard {
  width: 80%;
  margin-left: 10px;
  flex: 1;
}

.leftCard {
  width: 18%;
}
/deep/.card {
  margin-bottom: 0;
}

/deep/.ivu-table td.centerText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}
.onButton:hover {
  color: white;
}
/deep/ footer.page-link:hover {
  background-color: #ffffff;
}
</style>
-->










 